﻿@inherits TscComponentBase

<div class="d-flex textfield-autocomplete @Class" style="align-items:center;@(Style)">
    <div class="d-flex" style="@(_autocomplete ? "width: 100%":"width:calc(100% - 35px);")">
        <div style="@(_autocomplete ? "opacity:1;":"opacity:0;display:none;")transition-property: opacity;transition-duration: 0.2s;transition-timing-function:ease;width: 100%;">
            <SAutoComplete Value="Value"
                           ValueChanged="ValueChanged"
                           ValueExpression="ValueExpression"
                           Label="@I18n.Dashboard("Metrics expression")"
                           Placeholder="@I18n.Dashboard("Please select metrics expression")"
                           Required
                           BackgroundColor="white"
                           Items=Metrics.ToList()
                           ItemText="e => e.Key"
                           ItemValue="e => e.Value" />
        </div>
        <div style="@(_autocomplete ? "opacity:0;display:none;":"opacity:1;")transition-property: opacity;transition-duration: 0.2s;transition-timing-function:ease;width: 100%;">
            <STextField Value="Value"
                        ValueChanged="ValueChanged"
                        ValueExpression="ValueExpression"
                        Label="@I18n.Dashboard("Metrics expression")"
                        Placeholder="@I18n.Dashboard("Please enter metrics expression")"
                        BackgroundColor="white"
                        Class="full-width"
                        Required
                        DebounceInterval="1000"
                        Style="margin-right: 1px;">
            </STextField>
        </div>
        <MSpacer />
        <FadeTransition LeaveAbsolute>
            <div @onclick="SwitchMode" class="d-flex hover-pointer" style="background-color:white;height:46.5px;min-width:46.5px;z-index:1;margin-left:0;margin-top:1px;">
                <KeyTransitionElement Value="_autocomplete.ToString()" Class="ma-auto">
                    <SIcon>@(_autocomplete ? IconConstants.Update : "mdi-arrow-left")</SIcon>
                    </KeyTransitionElement>
                </div>
            </FadeTransition>

        </div>
        <div style="@(_autocomplete ? "display:none;":"width:20px; padding-left:10px;")">
            <a href="https://docs.masastack.com/stack/tsc/use-guide/metric" target="_blank" style="text-decoration:none">
                <SIcon Tooltip="@I18n.Dashboard("Clike me view metrics expression docs")">
                    mdi-help-circle-outline
                </SIcon>
            </a>
        </div>
    </div>

    @code {
    bool _autocomplete = true;

    [Parameter]
    public string? Value { get; set; }

    [Parameter]
    public EventCallback<string?> ValueChanged { get; set; }

    [Parameter]
    public Expression<Func<string?>>? ValueExpression { get; set; }

    [Parameter]
    public Dictionary<string, string> Metrics { get; set; } = new()
        {
            ["p99"] = $"histogram_quantile(0.99,sum(increase(http_server_duration_bucket[{MetricConstants.TIME_PERIOD}])) by (le))",
            ["p95"] = $"histogram_quantile(0.95,sum(increase(http_server_duration_bucket[{MetricConstants.TIME_PERIOD}])) by (le))",
            ["p90"] = $"histogram_quantile(0.90,sum(increase(http_server_duration_bucket[{MetricConstants.TIME_PERIOD}])) by (le))",
            ["p75"] = $"histogram_quantile(0.75,sum(increase(http_server_duration_bucket[{MetricConstants.TIME_PERIOD}])) by (le))",
            ["p50"] = $"histogram_quantile(0.50,sum(increase(http_server_duration_bucket[{MetricConstants.TIME_PERIOD}])) by (le))",
        };

    protected override void OnInitialized()
    {
        if (string.IsNullOrEmpty(Value) is false && Metrics.ContainsValue(Value) is false)
        {
            _autocomplete = false;
        }
        base.OnInitialized();
    }

    void SwitchMode()
    {
        _autocomplete = !_autocomplete;
        //if (_autocomplete && string.IsNullOrEmpty(Value) is false && Metrics.ContainsValue(Value) is false)
        //{
        //    await ValueChanged.InvokeAsync(null);
        //}
    }
}
